<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借还管理</title>
    <!--引入vue-->
    <script src="../../js/vue.js"></script>
    <!--引入Element-->
    <script src="../../js/index.js"></script>
    <link rel="stylesheet" href="../../css/index.css">
    <!--引入axios-->
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <style>
        .flex-container {
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 均匀分布空间 */
        }

        .input-with-select {
            background-color: #409eff; /* 按钮颜色与el-button一致 */
            width: 300px;
            border-radius: 10px;
        }

        .select-with-button {
            margin-left: 10px; /* 与输入框的间距 */
        }
    </style>


</head>
<body>
<div id="app">

    <div class="flex-container">
        <div>
            <el-select v-model="flag" filterable placeholder="请选择" class="select-with-button">
                <el-option label="所有" value="0"></el-option>
                <el-option label="已还" value="1"></el-option>
                <el-option label="超期" value="2"></el-option>
                <el-option label="已催还" value="3"></el-option>
            </el-select>
            <el-button type="primary" @click="searchByBranchId">搜索</el-button>
            <el-button type="primary" @click="getList">刷新</el-button>
        </div>

    </div>

    <br>
    <div>
        <el-table
                :data="tableData"
                height="650"
                border
                style="width: 100%">

            <el-table-column
                    align="center"
                    prop="userName"
                    label="用户名">
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="bookName"
                    label="图书名"
                    width="150">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="借阅日期"
                    width="250">
                <template slot-scope="scope">
                    {{ formatTimestamp(scope.row.lend_date) }}
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="归还日期"
                    width="250">
                <template slot-scope="scope">
                    {{ formatTimestamp(scope.row.back_date) }}
                </template>
            </el-table-column>


            <el-table-column align="center" label="还书状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.flag===1" type="success">已还</el-tag>
                    <el-tag v-else-if="scope.row.flag===2" type="info" >超期</el-tag>
                    <el-tag v-else-if="scope.row.flag===3" type="warning">已催还</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateFlag(scope.row)" :disabled="scope.row.flag !==2" size="small">催还</el-button>
                    <el-button type="danger" @click="deleteLend(scope.row)" :disabled="scope.row.flag!==1" size="small">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>

</div>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                tableData: [],
                //角色类型编号
                flag: "0",
            }
        },
        created() {
            //初始化列表
            this.getList()

        },
        methods: {
            //获取图书列表
            async getList() {
                console.log("获取列表", this.flag, this.userName)
                await $axios.get("/lendList?m=getList&flag=" + this.flag).then(res => {
                    console.log(res)
                    if (res.code === 1) {
                        this.tableData = res.data
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 搜索按钮方法
            searchByBranchId() {
                // 调用列表方法
                this.getList()
            },

            //催还方法
            updateFlag(row) {
                console.log(row)
                this.$confirm('是否催还?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用催还方法
                    $axios.get("/lendList?m=updateById&ser_num=" + row.ser_num).then(res => {
                        if (res.code === 1) {
                            // 提示删除成功
                            this.$message({
                                type: 'success',
                                message: '催还成功!'
                            });
                            // 调用图书列表方法
                            this.getList()
                        } else {
                            // 提示删除失败
                            this.$message({
                                type: 'error',
                                message: '催还失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消催还'
                    });
                });
            },
            //删除方法
            async deleteLend(row) {
                console.log(row)
                this.$confirm('是否删除该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用删除方法
                    $axios.delete("/lendList?m=delete&ser_num=" + row.ser_num).then(res => {
                        if (res.code === 1) {
                            // 提示删除成功
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            // 调用图书列表方法
                            this.getList()
                        } else {
                            // 提示删除失败
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },


            //时间戳转换
            formatTimestamp(timestamp) {
                const date = new Date(timestamp); // 使用时间戳创建 Date 对象

                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，然后补零
                const day = String(date.getDate()).padStart(2, '0'); // 补零
                const hours = String(date.getHours()).padStart(2, '0'); // 补零
                const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
                const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
                console.log("时间转换")
                // 构建日期时间字符串
                // return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
                return `${year}-${month}-${day}`;
            },


        },
    })
</script>
</body>
</html>